// 面板子页面 设备列表 
import React from 'react';
import './deviceListDetail.scss';
import cookie from 'react-cookies';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { List, Tabs, Row, Col,Select,DatePicker,Table,Button,Empty,Card, message } from 'antd';
import { CheckCircleTwoTone, CloseCircleOutlined ,SettingOutlined,LoadingOutlined, PlusOutlined ,UploadOutlined} from '@ant-design/icons';
// import Search from '_antd@4.16.13@antd/lib/transfer/search';
import {eqModelList} from '../../../api/deviceLibrary'
import {withRouter} from 'react-router-dom'

class deviceListDetail extends React.Component {
    state = {
            id:'',
            list:[],
            name:'',
            type:''
    }
    componentDidMount() {   
    }
    componentDidUpdate(){
       
    }
    shouldComponentUpdate(nextProps, nextState){
        if (this.props.id !== nextProps.id) {
            this.setState({id:nextProps.id,name:nextProps.name,type:nextProps.type},
                ()=>{this.getEqModelList(nextProps.id)})
            return true;
        }
        return true
    }
    callback = () => {

    }
    // 点击新增型号
    addNewType = () => {
        if(!this.state.id){
            message.error('请先选择设备分类')
            return
        }
        this.props.history.push({
                                pathname: '/index/deviceLibrary/deviceList/addNewType',
                                state:{ Id: this.state.id,name: this.state.name, type:this.state.type}})
    }
    // 数据列表
    getEqModelList=(cate_id)=>{
        let _this = this
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
            cate_id
        }
        eqModelList(post_data).then(res=>{
            if(res.code == 0) {
                setTimeout(() => {
                    _this.setState({list:res.data.list})
                }, 0);
            }
            
        })
    }
    // 点击卡片
    handleCard = (id) => {
        this.props.history.push({
            pathname: '/index/deviceLibrary/deviceList/deviceInfo',
            state:{ spu_id: id,type:this.state.type}})
    }

    render() {
        const { list } = this.state;
        return (
            <Row className="deviceListDe-con">
                <Row style={{height:'60px'}}>
                    <Col span={18}>
                        <div className="tipss">
                            <span className="blue"></span>
                            <span>设备列表</span>
                        </div>
                    </Col>
                    <Col span={6}>
                        <Button type="primary" style={{width:'120px'}} onClick={this.addNewType.bind(this)}>
                            + 新增型号
                        </Button>
                    </Col>
                </Row>
                <Row>
                    {list.length > 0 && list.map((item,index) => (
                        <Card key={index}  style={{ width: '435px',height:'150px',margin:'35px' }}>
                            <div className="innerbox">
                                <img src={item.img_url[0]} onClick={this.handleCard.bind(this,item.spu_id)} style={{cursor:'pointer'}}/>
                                <div className="info">
                                    <p>
                                        {item.cate_name} {item.eq_model}
                                    </p>
                                    <p>
                                        <span style={{marginRight:8}}>
                                            {item.brand_name}
                                        </span>
                                        <span>
                                            {item.is_offer == 1? <span><CheckCircleTwoTone />  可用</span> : <span  style={{color:'red'}}><CloseCircleOutlined />  不可用</span> }
                                        </span>
                                    </p>
                                    <p>
                                        {item.advice_price} / 台
                                    </p>
                                </div>
                            </div>
                        </Card>
                    ))}
                    {list.length == 0 ? <Empty  style={{width:'100%',backgroundColor:'#eee',padding:20}} /> : ''}
                </Row>
                
            </Row>
        )
    }
}

export default  withRouter(deviceListDetail);